<template>
  <div class="analytics">
    <div class="page-header">
      <div class="header-left">
        <h1>数据分析</h1>
        <p class="page-description">项目数据统计分析与可视化报表</p>
      </div>
      <div class="header-right">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="handleDateRangeChange"
        />
        <el-button @click="exportReport">
          <el-icon><Download /></el-icon>
          导出报告
        </el-button>
        <el-button type="primary" @click="refreshData">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>
    </div>
    
    <!-- 概览统计 -->
    <div class="overview-stats">
      <div class="stat-card">
        <div class="stat-icon projects">
          <el-icon><Folder /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ overviewStats.totalProjects }}</div>
          <div class="stat-label">总项目数</div>
          <div class="stat-change positive">+{{ overviewStats.projectsGrowth }}%</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon tasks">
          <el-icon><List /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ overviewStats.totalTasks }}</div>
          <div class="stat-label">总任务数</div>
          <div class="stat-change positive">+{{ overviewStats.tasksGrowth }}%</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon completion">
          <el-icon><CircleCheck /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ overviewStats.completionRate }}%</div>
          <div class="stat-label">完成率</div>
          <div class="stat-change" :class="overviewStats.completionGrowth >= 0 ? 'positive' : 'negative'">
            {{ overviewStats.completionGrowth >= 0 ? '+' : '' }}{{ overviewStats.completionGrowth }}%
          </div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon efficiency">
          <el-icon><TrendCharts /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ overviewStats.efficiency }}</div>
          <div class="stat-label">工作效率</div>
          <div class="stat-change positive">+{{ overviewStats.efficiencyGrowth }}%</div>
        </div>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-grid">
      <!-- 项目进度趋势 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3>项目进度趋势</h3>
          <el-select v-model="progressTrendPeriod" size="small" @change="updateProgressTrend">
            <el-option label="最近7天" value="7d" />
            <el-option label="最近30天" value="30d" />
            <el-option label="最近3个月" value="3m" />
          </el-select>
        </div>
        <div ref="progressTrendChart" class="chart-container"></div>
      </div>
      
      <!-- 任务状态分布 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3>任务状态分布</h3>
          <el-radio-group v-model="taskStatusView" size="small" @change="updateTaskStatusChart">
            <el-radio-button label="count">数量</el-radio-button>
            <el-radio-button label="percentage">百分比</el-radio-button>
          </el-radio-group>
        </div>
        <div ref="taskStatusChart" class="chart-container"></div>
      </div>
      
      <!-- 团队工作量分析 -->
      <div class="chart-card full-width">
        <div class="chart-header">
          <h3>团队工作量分析</h3>
          <div class="chart-controls">
            <el-select v-model="workloadMetric" size="small" @change="updateWorkloadChart">
              <el-option label="任务数量" value="tasks" />
              <el-option label="工作时长" value="hours" />
              <el-option label="完成率" value="completion" />
            </el-select>
            <el-select v-model="workloadPeriod" size="small" @change="updateWorkloadChart">
              <el-option label="本周" value="week" />
              <el-option label="本月" value="month" />
              <el-option label="本季度" value="quarter" />
            </el-select>
          </div>
        </div>
        <div ref="workloadChart" class="chart-container large"></div>
      </div>
      
      <!-- 问题统计 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3>问题统计</h3>
          <el-select v-model="issueStatsPeriod" size="small" @change="updateIssueStats">
            <el-option label="本周" value="week" />
            <el-option label="本月" value="month" />
            <el-option label="本季度" value="quarter" />
          </el-select>
        </div>
        <div ref="issueStatsChart" class="chart-container"></div>
      </div>
      
      <!-- 项目健康度 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3>项目健康度</h3>
          <el-tooltip content="基于进度、质量、风险等因素综合评估" placement="top">
            <el-icon class="info-icon"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
        <div ref="projectHealthChart" class="chart-container"></div>
      </div>
    </div>
    
    <!-- 详细数据表格 -->
    <div class="data-tables">
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="项目详情" name="projects">
          <div class="table-card">
            <div class="table-header">
              <h3>项目详细数据</h3>
              <el-input
                v-model="projectSearch"
                placeholder="搜索项目"
                clearable
                style="width: 200px"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
            <el-table :data="filteredProjects" stripe>
              <el-table-column prop="name" label="项目名称" min-width="150" />
              <el-table-column prop="manager" label="项目经理" width="100" />
              <el-table-column label="进度" width="120">
                <template #default="{ row }">
                  <el-progress :percentage="row.progress" :stroke-width="8" />
                </template>
              </el-table-column>
              <el-table-column prop="tasksTotal" label="总任务" width="80" />
              <el-table-column prop="tasksCompleted" label="已完成" width="80" />
              <el-table-column prop="issuesOpen" label="待解决问题" width="100" />
              <el-table-column label="健康度" width="100">
                <template #default="{ row }">
                  <el-tag :type="getHealthType(row.health)" size="small">
                    {{ getHealthText(row.health) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="deadline" label="截止日期" width="120" />
            </el-table>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="团队绩效" name="team">
          <div class="table-card">
            <div class="table-header">
              <h3>团队成员绩效</h3>
              <el-select v-model="teamPeriod" @change="updateTeamData">
                <el-option label="本周" value="week" />
                <el-option label="本月" value="month" />
                <el-option label="本季度" value="quarter" />
              </el-select>
            </div>
            <el-table :data="teamData" stripe>
              <el-table-column prop="name" label="姓名" width="100" />
              <el-table-column prop="role" label="角色" width="100" />
              <el-table-column prop="tasksAssigned" label="分配任务" width="100" />
              <el-table-column prop="tasksCompleted" label="完成任务" width="100" />
              <el-table-column label="完成率" width="100">
                <template #default="{ row }">
                  <span :class="getCompletionRateClass(row.completionRate)">
                    {{ row.completionRate }}%
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="workHours" label="工作时长" width="100" />
              <el-table-column prop="avgTaskTime" label="平均任务时长" width="120" />
              <el-table-column label="绩效评级" width="100">
                <template #default="{ row }">
                  <el-rate
                    v-model="row.rating"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="时间分析" name="time">
          <div class="table-card">
            <div class="table-header">
              <h3>时间使用分析</h3>
              <el-date-picker
                v-model="timeAnalysisDate"
                type="month"
                placeholder="选择月份"
                format="YYYY-MM"
                value-format="YYYY-MM"
                @change="updateTimeAnalysis"
              />
            </div>
            <div class="time-analysis-content">
              <div class="time-summary">
                <div class="time-stat">
                  <div class="time-value">{{ timeStats.totalHours }}h</div>
                  <div class="time-label">总工作时长</div>
                </div>
                <div class="time-stat">
                  <div class="time-value">{{ timeStats.avgDailyHours }}h</div>
                  <div class="time-label">日均工作时长</div>
                </div>
                <div class="time-stat">
                  <div class="time-value">{{ timeStats.productiveHours }}h</div>
                  <div class="time-label">有效工作时长</div>
                </div>
                <div class="time-stat">
                  <div class="time-value">{{ timeStats.efficiency }}%</div>
                  <div class="time-label">时间利用率</div>
                </div>
              </div>
              <div ref="timeAnalysisChart" class="chart-container large"></div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import {
  Download,
  Refresh,
  Folder,
  List,
  CircleCheck,
  TrendCharts,
  InfoFilled,
  Search
} from '@element-plus/icons-vue'

// 响应式数据
const dateRange = ref([dayjs().subtract(30, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])
const activeTab = ref('projects')
const progressTrendPeriod = ref('30d')
const taskStatusView = ref('count')
const workloadMetric = ref('tasks')
const workloadPeriod = ref('month')
const issueStatsPeriod = ref('month')
const projectSearch = ref('')
const teamPeriod = ref('month')
const timeAnalysisDate = ref(dayjs().format('YYYY-MM'))

// 图表引用
const progressTrendChart = ref()
const taskStatusChart = ref()
const workloadChart = ref()
const issueStatsChart = ref()
const projectHealthChart = ref()
const timeAnalysisChart = ref()

// 概览统计数据
const overviewStats = ref({
  totalProjects: 24,
  projectsGrowth: 12.5,
  totalTasks: 156,
  tasksGrowth: 8.3,
  completionRate: 78.5,
  completionGrowth: 5.2,
  efficiency: 85.2,
  efficiencyGrowth: 3.1
})

// 项目数据
const projects = ref([
  {
    id: 1,
    name: '电商平台重构',
    manager: '张三',
    progress: 85,
    tasksTotal: 45,
    tasksCompleted: 38,
    issuesOpen: 3,
    health: 'good',
    deadline: '2024-02-15'
  },
  {
    id: 2,
    name: '移动端APP开发',
    manager: '李四',
    progress: 62,
    tasksTotal: 32,
    tasksCompleted: 20,
    issuesOpen: 5,
    health: 'warning',
    deadline: '2024-03-01'
  },
  {
    id: 3,
    name: '数据分析系统',
    manager: '王五',
    progress: 45,
    tasksTotal: 28,
    tasksCompleted: 13,
    issuesOpen: 8,
    health: 'risk',
    deadline: '2024-02-28'
  },
  {
    id: 4,
    name: '用户管理系统',
    manager: '赵六',
    progress: 92,
    tasksTotal: 22,
    tasksCompleted: 20,
    issuesOpen: 1,
    health: 'excellent',
    deadline: '2024-01-30'
  }
])

// 团队数据
const teamData = ref([
  {
    id: 1,
    name: '张三',
    role: '项目经理',
    tasksAssigned: 15,
    tasksCompleted: 13,
    completionRate: 87,
    workHours: 168,
    avgTaskTime: '2.5天',
    rating: 4.5
  },
  {
    id: 2,
    name: '李四',
    role: '前端开发',
    tasksAssigned: 20,
    tasksCompleted: 18,
    completionRate: 90,
    workHours: 172,
    avgTaskTime: '2.1天',
    rating: 4.8
  },
  {
    id: 3,
    name: '王五',
    role: '后端开发',
    tasksAssigned: 18,
    tasksCompleted: 14,
    completionRate: 78,
    workHours: 165,
    avgTaskTime: '3.2天',
    rating: 4.2
  },
  {
    id: 4,
    name: '赵六',
    role: 'UI设计师',
    tasksAssigned: 12,
    tasksCompleted: 11,
    completionRate: 92,
    workHours: 158,
    avgTaskTime: '1.8天',
    rating: 4.6
  }
])

// 时间统计数据
const timeStats = ref({
  totalHours: 663,
  avgDailyHours: 8.2,
  productiveHours: 542,
  efficiency: 82
})

// 过滤后的项目列表
const filteredProjects = computed(() => {
  if (!projectSearch.value) return projects.value
  return projects.value.filter(project => 
    project.name.toLowerCase().includes(projectSearch.value.toLowerCase()) ||
    project.manager.toLowerCase().includes(projectSearch.value.toLowerCase())
  )
})

// 获取健康度类型
const getHealthType = (health: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
  const types: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'> = {
    'excellent': 'success',
    'good': 'primary',
    'warning': 'warning',
    'risk': 'danger'
  }
  return types[health] || 'info'
}

// 获取健康度文本
const getHealthText = (health: string) => {
  const texts: Record<string, string> = {
    'excellent': '优秀',
    'good': '良好',
    'warning': '警告',
    'risk': '风险'
  }
  return texts[health] || health
}

// 获取完成率样式类
const getCompletionRateClass = (rate: number) => {
  if (rate >= 90) return 'completion-excellent'
  if (rate >= 80) return 'completion-good'
  if (rate >= 70) return 'completion-warning'
  return 'completion-poor'
}

// 初始化项目进度趋势图
const initProgressTrendChart = () => {
  if (!progressTrendChart.value) return
  
  const chart = echarts.init(progressTrendChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['计划进度', '实际进度']
    },
    xAxis: {
      type: 'category',
      data: ['1月1日', '1月8日', '1月15日', '1月22日', '1月29日', '2月5日', '2月12日']
    },
    yAxis: {
      type: 'value',
      name: '进度(%)',
      max: 100
    },
    series: [
      {
        name: '计划进度',
        type: 'line',
        data: [10, 25, 40, 55, 70, 85, 100],
        smooth: true,
        lineStyle: {
          color: '#409eff'
        }
      },
      {
        name: '实际进度',
        type: 'line',
        data: [8, 22, 38, 52, 68, 78, 85],
        smooth: true,
        lineStyle: {
          color: '#67c23a'
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化任务状态分布图
const initTaskStatusChart = () => {
  if (!taskStatusChart.value) return
  
  const chart = echarts.init(taskStatusChart.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '任务状态',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 45, name: '已完成', itemStyle: { color: '#67c23a' } },
          { value: 32, name: '进行中', itemStyle: { color: '#409eff' } },
          { value: 18, name: '待开始', itemStyle: { color: '#e6a23c' } },
          { value: 8, name: '已暂停', itemStyle: { color: '#f56c6c' } }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化团队工作量分析图
const initWorkloadChart = () => {
  if (!workloadChart.value) return
  
  const chart = echarts.init(workloadChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['分配任务', '完成任务']
    },
    xAxis: {
      type: 'category',
      data: ['张三', '李四', '王五', '赵六', '钱七', '孙八']
    },
    yAxis: {
      type: 'value',
      name: '任务数量'
    },
    series: [
      {
        name: '分配任务',
        type: 'bar',
        data: [15, 20, 18, 12, 16, 14],
        itemStyle: {
          color: '#409eff'
        }
      },
      {
        name: '完成任务',
        type: 'bar',
        data: [13, 18, 14, 11, 15, 12],
        itemStyle: {
          color: '#67c23a'
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化问题统计图
const initIssueStatsChart = () => {
  if (!issueStatsChart.value) return
  
  const chart = echarts.init(issueStatsChart.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['新增问题', '解决问题']
    },
    xAxis: {
      type: 'category',
      data: ['第1周', '第2周', '第3周', '第4周']
    },
    yAxis: {
      type: 'value',
      name: '问题数量'
    },
    series: [
      {
        name: '新增问题',
        type: 'line',
        data: [12, 8, 15, 6],
        lineStyle: {
          color: '#f56c6c'
        }
      },
      {
        name: '解决问题',
        type: 'line',
        data: [10, 12, 13, 8],
        lineStyle: {
          color: '#67c23a'
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化项目健康度图
const initProjectHealthChart = () => {
  if (!projectHealthChart.value) return
  
  const chart = echarts.init(projectHealthChart.value)
  const option = {
    tooltip: {
      formatter: '{a} <br/>{b}: {c}%'
    },
    series: [
      {
        name: '项目健康度',
        type: 'gauge',
        detail: {
          formatter: '{value}%'
        },
        data: [
          {
            value: 82,
            name: '综合健康度'
          }
        ],
        axisLine: {
          lineStyle: {
            color: [
              [0.3, '#f56c6c'],
              [0.7, '#e6a23c'],
              [0.9, '#409eff'],
              [1, '#67c23a']
            ]
          }
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化时间分析图
const initTimeAnalysisChart = () => {
  if (!timeAnalysisChart.value) return
  
  const chart = echarts.init(timeAnalysisChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['工作时长', '有效时长', '效率']
    },
    xAxis: {
      type: 'category',
      data: Array.from({ length: 31 }, (_, i) => `${i + 1}日`)
    },
    yAxis: [
      {
        type: 'value',
        name: '时长(小时)',
        position: 'left'
      },
      {
        type: 'value',
        name: '效率(%)',
        position: 'right',
        max: 100
      }
    ],
    series: [
      {
        name: '工作时长',
        type: 'bar',
        data: Array.from({ length: 31 }, () => Math.floor(Math.random() * 4) + 6),
        itemStyle: {
          color: '#409eff'
        }
      },
      {
        name: '有效时长',
        type: 'bar',
        data: Array.from({ length: 31 }, () => Math.floor(Math.random() * 3) + 5),
        itemStyle: {
          color: '#67c23a'
        }
      },
      {
        name: '效率',
        type: 'line',
        yAxisIndex: 1,
        data: Array.from({ length: 31 }, () => Math.floor(Math.random() * 20) + 70),
        lineStyle: {
          color: '#e6a23c'
        }
      }
    ]
  }
  chart.setOption(option)
}

// 事件处理函数
const handleDateRangeChange = () => {
  ElMessage.info('日期范围已更新，正在刷新数据...')
  refreshData()
}

const exportReport = () => {
  ElMessage.info('导出功能开发中...')
}

const refreshData = () => {
  ElMessage.success('数据已刷新')
  // 这里应该重新加载所有数据
}

const updateProgressTrend = () => {
  initProgressTrendChart()
}

const updateTaskStatusChart = () => {
  initTaskStatusChart()
}

const updateWorkloadChart = () => {
  initWorkloadChart()
}

const updateIssueStats = () => {
  initIssueStatsChart()
}

const handleTabChange = () => {
  nextTick(() => {
    if (activeTab.value === 'time') {
      initTimeAnalysisChart()
    }
  })
}

const updateTeamData = () => {
  ElMessage.info('团队数据已更新')
}

const updateTimeAnalysis = () => {
  initTimeAnalysisChart()
}

// 初始化所有图表
const initAllCharts = () => {
  nextTick(() => {
    initProgressTrendChart()
    initTaskStatusChart()
    initWorkloadChart()
    initIssueStatsChart()
    initProjectHealthChart()
  })
}

// 窗口大小变化时重新调整图表
const handleResize = () => {
  const charts = [
    progressTrendChart.value,
    taskStatusChart.value,
    workloadChart.value,
    issueStatsChart.value,
    projectHealthChart.value,
    timeAnalysisChart.value
  ]
  
  charts.forEach(chartRef => {
    if (chartRef) {
      const chart = echarts.getInstanceByDom(chartRef)
      if (chart) {
        chart.resize()
      }
    }
  })
}

onMounted(() => {
  initAllCharts()
  window.addEventListener('resize', handleResize)
})
</script>

<style scoped>
.analytics {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-left h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.page-description {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.header-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}

.stat-icon.projects {
  background: #409eff;
}

.stat-icon.tasks {
  background: #67c23a;
}

.stat-icon.completion {
  background: #e6a23c;
}

.stat-icon.efficiency {
  background: #f56c6c;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.stat-change {
  font-size: 12px;
  font-weight: 500;
}

.stat-change.positive {
  color: #67c23a;
}

.stat-change.negative {
  color: #f56c6c;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.chart-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chart-card.full-width {
  grid-column: 1 / -1;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

.chart-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.chart-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.info-icon {
  color: #909399;
  cursor: help;
}

.chart-container {
  height: 300px;
  padding: 20px;
}

.chart-container.large {
  height: 400px;
}

.data-tables {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-card {
  padding: 0;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

.table-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.completion-excellent {
  color: #67c23a;
  font-weight: 600;
}

.completion-good {
  color: #409eff;
  font-weight: 600;
}

.completion-warning {
  color: #e6a23c;
  font-weight: 600;
}

.completion-poor {
  color: #f56c6c;
  font-weight: 600;
}

.time-analysis-content {
  padding: 20px;
}

.time-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.time-stat {
  text-align: center;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.time-value {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.time-label {
  font-size: 12px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .overview-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
  
  .time-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .header-right {
    flex-direction: column;
  }
  
  .overview-stats {
    grid-template-columns: 1fr;
  }
  
  .chart-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .chart-controls {
    justify-content: center;
  }
  
  .table-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .time-summary {
    grid-template-columns: 1fr;
  }
}
</style>